<script setup lang="ts">
import useInfoStore from "../../store/modules/info";
import useTodoStore from "../../store/modules/todo";

const infoStore = useInfoStore();
const todoStore = useTodoStore();

const handler = () => {
  // todoStore.todos.unshift({ id: 4, title: "拉屎", done: true });
  todoStore.add({ id: 4, title: "拉屎", done: true });
};
</script>

<template>
  <div class="son">
    <h2>子组件2</h2>
    <div>{{ infoStore.count }}</div>
    <ul>
      <li v-for="todo in todoStore.todos" :key="todo.id">
        {{ todo.title }} -- {{ todo.done }}
      </li>
    </ul>
    <div>共有 {{ todoStore.doneTotal }} /{{ todoStore.total }} 个待办</div>
    <div>
      <button @click.once="handler">添加一项</button>
    </div>
  </div>
</template>

<style scoped>
.son {
  width: 50%;
  min-height: 200px;
  background: skyblue;
  padding: 1.5rem;
  margin: 0.5rem;
}
</style>
